<template>
	<div class="main-container">
		<!-- 列表模块 -->
		<div class="table-content" v-show="!detailShow">
			<!-- 搜索栏 -->
			<div class="list-search" ref="listSearch">
				<div class="list-search-left fl">
					<Form ref="listParam" :model="listParam" :label-width="80" label-position="right">
						<Row>
							<#list columnList as column>
							<#if column.query>
							<Col span="8">
								<FormItem :label="$t('${className}.search.${column.attrName}')">
									<#if column.formType == 'text' || column.formType == 'textarea' || column.formType == 'editor'>
									<Input
													v-model="listParam.${column.attrName}"
													type="text"
													maxlength="100"
													clearable
													:placeholder="$t('${className}.search.placeholder.${column.attrName}')"
									></Input>
									<#elseif column.formType == 'select'>
									<Select
													:clearable="true"
													v-model="listParam.${column.attrName}"
													filterable
													:placeholder="$t('${className}.search.placeholder.${column.attrName}')">
										<Option
														v-for="item in ${column.attrName?replace("Id", "")}"
														:value="item.id"
														:key="item.id"
										>{{ item.name }}</Option>
									</Select>
									<#elseif column.formType == 'date'>
									<DatePicker
													ref="searchDatePicker"
													:editable="false"
													:value="listParam.${column.attrName}"
													format="yyyy-MM-dd"
													@on-change="(dateStr) => {listParam.${column.attrName} = dateStr;}"
													type="daterange"
													:placeholder="$t('${className}.search.placeholder.${column.attrName}')"
													style="width: 100%"
									></DatePicker>
									<#elseif column.formType == 'datetime'>
									<DatePicker
													ref="searchDatePicker"
													:editable="false"
													:value="listParam.${column.attrName}"
													format="yyyy-MM-dd HH:mm"
													@on-change="(dateStr) => {listParam.${column.attrName} = dateStr;}"
													type="datetimerange"
													:placeholder="$t('${className}.search.placeholder.${column.attrName}')"
													style="width: 100%"
									></DatePicker>
									<#else>
									<!--树形下拉选择-->
									<TreeSelect
													:transfer="transfer"
													v-model="listParam.${column.attrName}"
													:data="${column.attrName?replace("Id", "")}TreeData"
													:load-data="load${column.attrName?replace("Id", "")}TreeData"
													@on-change-object="${column.attrName?replace("Id", "")}TreeDataChange"
									></TreeSelect>
									</#if>
								</FormItem>
							</Col>
							</#if>
							</#list>
						</Row>
					</Form>
				</div>
				<div class="list-search-right fr">
					<Button type="primary" @click="search()">
						<span class="font_family icon-chaxun"></span>{{ $t("components.uiButton.search") }}
					</Button>
					<Button @click="resetParam">
						<span class="font_family icon-reset"></span>{{ $t("components.uiButton.reset") }}
					</Button>
					<a @click="isShow = true" v-show="!isShow">
						<span class="show-button">展开<Icon type="ios-arrow-down" /></span>
					</a>
					<a @click="isShow = false" v-show="isShow">
						<span class="show-button">收起<Icon type="ios-arrow-up" /></span>
					</a>
				</div>
			</div>
			<!-- 表格数据 -->
			<div class="list-table">
				<div class="listHeader" ref="listHeader" id="listHeader">
          <span class="btn" @click="addEditDetail({}, 1)">
            <span class="font_family icon-add1"></span>
            <span class="txt">{{ $t("components.uiButton.add") }}</span>
          </span>
				</div>
				<Table
								stripe
								:loading="loading"
								:columns="tabColumn"
								:data="tableData"
								:max-height="maxTableHeight"
								row-key="id"
								class="scroll-bar"
				>
					<#list columnList as column>
					<#if column.list>
					<!-- ${column.columnComment} -->
					<template slot-scope="{ row }" slot="${column.attrName}">
						<tooltip-text :tooltipData="row.${column.attrName}"></tooltip-text>
					</template>
					</#if>
					</#list>
					<!-- 操作 -->
					<template slot-scope="{ row }" slot="action">
						<!-- 折叠操作 -->
						<div>
							<Button type="text" size="small" class="but-text" @click="addEditDetail(row, 3)">
								{{ $t("components.uiButton.see") }}
							</Button>
							<Dropdown :transfer="true">
								<a>
									<Icon type="ios-arrow-down" />
								</a>
								<DropdownMenu slot="list">
									<DropdownItem @click.native="addEditDetail(row, 2)">
										{{ $t("components.uiButton.edit") }}
									</DropdownItem>
									<DropdownItem @click.native="deleteItem(row)">
										{{ $t("components.uiButton.delete") }}
									</DropdownItem>
								</DropdownMenu>
							</Dropdown>
						</div>
						<!-- 非折叠操作 -->
						<div class="action-btn">
							<span @click="addEditDetail(row, 3)">{{ $t("components.uiButton.see") }}</span>
							<span @click="addEditDetail(row, 2)">{{ $t("components.uiButton.edit") }}</span>
							<span @click="deleteItem(row)">{{ $t("components.uiButton.delete") }}</span>
						</div>
					</template>
				</Table>
				<TablePage
								v-show="page.total"
								ref="tablePage"
								:total="page.total"
								@pageChange="loadList"
				></TablePage>
			</div>
		</div>
		<!-- 新增、编辑、详情模块 -->
		<addEditDetailForm
						v-if="detailShow"
						:form="detailData"
						@closeForm="closeForm"
		></addEditDetailForm>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapActions } from "vuex";
	import addEditDetailForm from "./add-edit-detail";
	import * as ${className}Api from "@/api/${className}.api";
	export default {
		name: "${className}Index",
		components: {
			addEditDetailForm
		},
		data() {
			return {
				detailShow: false, //列表 | 新增、编辑、详情显示切换
				loading: false, //列表加载
				isShow: false, //搜索条件超过3个，折叠
				listParam: {}, //搜索条件
				fristIn: 0, //分页第一次加载
				page: { 		//分页参数
					total: 0,
					current: 1,
					size: 20,
				},
				detailData: {}, //详情数据
				tableData: [], //表格数据
				tabColumn: [   //表格列
					{
						title: this.$t("components.uiText.index"),
						align: "center",
						width: 75,
						render: (h, params) => {
							return this.$common.backSeriesIdx(
											h,
											params.row._index + 1 + this.page.size * (this.page.current - 1)
							);
						},
					},
					<#list columnList as column>
					<#if column.list>
					//${column.columnComment}
					{
						title: this.$t('${className}.table.${column.attrName}'),
						slot: "${column.attrName}",
						align: "center",
						// width: 250,
					},
					</#if>
					</#list>
					//操作
					{
						title: this.$t("components.uiText.operator"),
						width: 100,
						align: "center",
						slot: "action",
					},
				],
			};
		},
		computed: {
			...mapGetters(["pid", "userInfo"]),
			maxTableHeight() {
				return window.innerHeight - 250;
			},
		},
		watch: {

		},
		created() {
			//请求列表数据
			this.getList();
		},
		methods: {
			// 请求列表数据
			getList() {
				// 参考示例
			  this.loading = true;
			  let params = {
			    pageIndex: this.page.current,
			    pageSize: this.page.size,

			  };
				${className}Api.get${ClassName}List(params).then((res) => {
			    if (res.code == 200) {
			      this.page.total = Number(res.data.total);
			      this.page.totalPage = Number(res.data.pages);
			      this.tableData = res.data.list;
			    } else {
			      this.$Message.error(res.msg);
			    }
			    this.fristIn = 0;
			    this.loading = false;
			  });
			},
			//搜索
			search() {
				this.$refs.tablePage.currentChange(1);
			},
			//重置
			resetParam() {
				this.listParam = {};
				this.$refs.tablePage.currentChange(1);
				//this.$refs.xxxxDatePicker.handleClear(); //自带清空函数
			},
			//切换下一页
			loadList(page) {
				if (this.fristIn === 0) {
					//限制重复点击或者重复调用
					this.fristIn = 1;
					//每次请求先清空数据
					this.tableData = [];
					this.page.current = page.current;
					this.page.size = page.size;
					this.getList();
				}
			},
			//新增、编辑、详情
			addEditDetail(data, type) {
				// type 1-新增 2-编辑 3-详情
				data.oprType = type;
				this.detailData = data;
				this.detailShow = true;
			},
			deleteItem(row) {
				this.$Modal.confirm({
					title:  this.$t("components.uiText.warmTip"),
					closable: true,
					content: this.$t("components.uiText.deleteConfirm"),
					width: 450,
					onOk: () => {
						//   删除接口
						${className}Api.del${ClassName}({
								id: row.id,
								userId: Storage.get("userId"),
							})
							.then((res) => {
								if (res.code == 200) {
									this.$Message.success(res.msg);
									if (this.page.current === this.page.totalPage && this.tableData.length === 1) {
										// 在页面的最后一页或页面只有一页，并且当前页面只有一条数据时
										this.page.current -= 1;
										if (!this.page.current) {
											// 防止在只有一页时并且当前页只有一条数据执行删除操作重新把当前页赋值为1
											this.page.current = 1;
										}
									}
									this.getList();
								} else {
									this.$Message.error(res.msg);
								}
							});
					},
				});
			},
			closeForm() {
				this.detailShow = false;
				this.resetParam();
			},
		},
	};
</script>

<style lang="less" scoped>

</style>